<template>
	<view>
		<view class="content">
			<view class="img">
				<image :src="infoImg" mode="widthFix">
			</view>
			
			<view class="price">
				<view class="title">
					<view class="" >
						{{list.title}}
					</view>
					<view class="" style="color: #555555;margin: 10rpx 0;font-size: 26rpx;">
						{{list.content}}
					</view>
					<view class="" style="color: #ff743b;">
						¥{{price}}
					</view>
				</view>
				<view class="num">
					<image @tap="del" src="../../static/my/add.png" mode="widthFix"></image>
					<view class="number">
						<input type="tel" class="uni-input" name="" v-model="number" @input='input' />
					</view>
					<image @tap="add" src="../../static/my/jian.png" mode="widthFix"></image>
				</view>
			</view>
			
<!-- 			<view class="forward" style="margin-top: 50rpx;" v-if="forward>0">
				<view>期货产品</view>
				<view>订单生效日期顺延{{forward}}天交付完毕</view>
			</view> -->
			
			<view class="user-title">
				<view class="user-icon-list">
					<view class="wdzh">
						<view class="ye">
							<view v-if="address" class="name">还没有地址哦~,请添加！</view>
							<view v-else class="name2">{{userName}}</view>
							<view class="phone">{{telNumber}}</view>
						</view>
					</view>
					<view class="address">
						{{provinceName}}
						{{cityName}}
						{{countyName}}
						{{detailInfo}}
					</view>
					<view class="zhmx"  @click="chooseAddress()">
						<image src="../../static/order/tjdz.png" mode="widthFix"></image>
						<text style="color: #FFFFFF;margin-left: 20rpx;">请添加收货地址</text>
					</view>
				</view>
			</view>
			
			<view class="info">
				<u-parse :content="htmlNodes" noData=" " @preview="preview" @navigate="navigate" class='parse'></u-parse>
			</view>
			
			
		</view>
		
		<view class="agree">
			<checkbox-group @change="checkboxChange" style="margin-left: 160rpx;">
				<label>
					<checkbox value="agree" color='#00aaff' style="transform:scale(0.7)" :checked="check" />
				</label>
			</checkbox-group>
			<!-- <view>已阅读并同意<view style="color: #00aaff;" @tap="toGongxiang">购买协议</view></view> -->
		</view>
		
		<view class="pay">
			<view class="money">
				¥{{money}}
			</view>
			<view class="con" v-if="profit">
				<view class="">
					预计收入
				</view>
				<view class="" >
					{{profit}}
				</view>
				
			</view>
			<view class="btn" @tap="buy">
				立即购买
			</view>
		</view>
		
		<Modal
			v-model="show1" 
			title='温馨提示' 
			text="还没注册是否前往注册?"
			confirm-text='立即前往'
			@cancel="cancel()"
			@confirm='confirm()'
		/>
	</view>
</template>

<script>
	let App = getApp();
	import Modal from '@/components/x-modal/x-modal'
	import uParse from '@/components/u-parse/u-parse.vue';
	export default {
		components: {
			Modal,
			uParse
		},
		data(){
			return{
				number:5,
				list:[],
				money:0,
				profit:0,
				userName:'',
				provinceName:'',
				cityName:'',
				countyName:'',
				detailInfo:'',
				telNumber:'',
				infoImg:'',
				show1:false,
				htmlNodes:'',
				check:false,
				forward:0,
				price:0
			}
		},
		onLoad(options) {
			console.log(options)
			this.getGoods(options.id)
		},
	
		methods:{
			
			toGongxiang(){
				uni.navigateTo({
					url:'aggress'
				})
			},
			
			checkboxChange(e){
				this.check = !this.check
			},
			
			changeTwoDecimal_f(x) 
			{ 
			　　var f_x = parseFloat(x); 
			　　if (isNaN(f_x)) 
			　　{ 
			　　　　return 0; 
			　　} 
			　　var f_x = Math.round(x*100)/100; 
			　　var s_x = f_x.toString(); 
			　　var pos_decimal = s_x.indexOf('.'); 
			　　if (pos_decimal < 0) 
			　　{ 
			　　　　pos_decimal = s_x.length; 
			　　s_x += '.'; 
			　　} 
			　　while (s_x.length <= pos_decimal + 2) 
			　　{ 
			　　　　s_x += '0'; 
			　　} 
			　　return s_x; 
			},
			
			getGoods(id){
				uni.showLoading({
					title:"加载中"
				})
				this.$api.interfaceApi('getGoodsInfo')({
					id:id
				}).then(res=>{
					if(res.code == 200){
						this.list = res.data
						this.price = res.data.price
						this.money = this.changeTwoDecimal_f(this.price * this.number)
						this.htmlNodes = res.data.introduction
						this.infoImg =  res.data.info_image
						this.forward =  res.data.forward
						if(res.data.min_profit == 0 &&  res.data.max_profit == 0){
							this.profit = 0
						}else{
							this.profit = res.data.min_profit * this.number +"-"+ res.data.max_profit * this.number + "元"
						}
						
					}
					uni.hideLoading()
				})
			},
			async chooseAddress(){
				let _this = this
				wx.chooseAddress({
					success (res) {
						_this.userName = res.userName
						_this.provinceName = res.provinceName
						_this.cityName = res.cityName
						_this.countyName = res.countyName
						_this.detailInfo = res.detailInfo
						_this.telNumber = res.telNumber
						_this.address = false
					}
				})
			},
			add(){
				this.number = this.number*1+1;
				
				if(this.number >=1000 && this.number < 5000){
					this.price=598
				}else if (this.number >=5000 && this.number < 10000){
					this.price=538
				}else if(this.number >= 10000){
					this.price=510
				}else{
					this.price=this.list.price
				}
				
				this.money = this.changeTwoDecimal_f(this.price * this.number)
				
				if(res.data.min_profit == 0 &&  res.data.max_profit == 0){
					this.profit = 0
				}else{
					this.profit = this.list.min_profit * this.number +"-"+ this.list.max_profit * this.number + "元"
				}
			},
			del(){
				if(this.number == 5){
					return;
				}
				this.number = this.number*1-1;
				
				if(this.number >=1000 && this.number < 5000){
					this.price=598
				}else if (this.number >=5000 && this.number < 10000){
					this.price=538
				}else if(this.number >= 10000){
					this.price=510
				}else{
					this.price=this.list.price
				}
				this.money = this.changeTwoDecimal_f(this.price * this.number)
				
				if(res.data.min_profit == 0 &&  res.data.max_profit == 0){
					this.profit = 0
				}else{
					this.profit = this.list.min_profit * this.number +"-"+ this.list.max_profit * this.number + "元"
				}
			},
			input(){
				if(this.number >=1000 && this.number < 5000){
					this.price=598
				}else if (this.number >=5000 && this.number < 10000){
					this.price=538
				}else if(this.number >= 10000){
					this.price=510
				}else{
					this.price=this.list.price
				}
				
				this.money = this.changeTwoDecimal_f(this.price * this.number)
				
				
				if(res.data.min_profit == 0 &&  res.data.max_profit == 0){
					this.profit = 0
				}else{
					this.profit = this.list.min_profit * this.number +"-"+ this.list.max_profit * this.number + "元"
				}
			},
			confirm(){
				uni.navigateTo({
					url:'/pages/register/register'
				})
			},
			cancel(e){
				this.show1= false
			},
			async buy(){
				
				if(!this.check){
					uni.showToast({
						title:'请先阅读购买协议！',
						icon:'error'
					})
					return
				}
				
				let userinfo = uni.getStorageSync('userinfo');

				if(!userinfo){
					this.show1 = true
					return
				}
				let result = await this.$api.interfaceApi('getPayConfig')({
					user_id:userinfo.id,
					userName:this.userName,
					provinceName:this.provinceName,
					cityName:this.cityName,
					countyName:this.countyName,
					detailInfo:this.detailInfo,
					telNumber:this.telNumber,
					number:this.number,
					equipment_id:this.list.id,
					admin_id:App.globalData.sys
				})
				console.log(result);
				uni.requestPayment({
				    provider: 'wxpay',
				    timeStamp: result.order.timeStamp,
				    nonceStr: result.order.nonceStr,
				    package: result.order.package,
				    signType: result.order.signType,
				    paySign: result.order.paySign,
				    success: function (res) {
						uni.switchTab({
							url:'/pages/index/index'
						});     
				        console.log('success:' + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log('fail:' + JSON.stringify(err));
				    }
				});
			},
			
		}
	}
</script>

<style lang="less" scoped>
	.content{
		padding: 20rpx;
		
		.img{
			width: 100%;
			height: 350rpx;
			image{
				width: 100%;
				height: 0;
			}
		}
		
		.price{
			display: flex;
			justify-content: space-between;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 20rpx;
			.num{
				display: flex;
				margin-top: 50rpx;
				image{
					width: 50rpx;
					margin-top: 4rpx;
				}
				
				.number{
					width: 150rpx;
					margin: 0rpx 40rpx;
					font-size: 40rpx;
					display: flex;
					
					input{
						text-align: center;
					}
				}
			}
		}
		
		.forward{
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 20rpx;
		}
		
		.info{
			margin-top: 30rpx;
			background-color: #FFFFFF;
			//padding: 20rpx;
			border-radius: 10rpx;

		}
		.user-icon-list {
			width: 100%;
			height: 250rpx;
			margin-top: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 30rpx 40rpx;
			box-sizing: border-box;
			background-size: 100% 100%;
			background-color: #FFFFFF;
			color: #000000;
			.wdzh {
				height: 40rpx;
				.ye {
					display: flex;	
					.name{
						color: #999999;
						margin: 0rpx 20rpx 0rpx 170rpx;
						margin-top: 30rpx;
					}		
							
					.name2{
						
					}
				}
			}
		
			.address{
				/* margin-top: 20rpx;
				height: 40rpx;
				padding-bottom: 70rpx;
				box-sizing: border-box; */
			}
			
			.zhmx{
				height: 70rpx;
				width: 100%;
				background-color: #00c84c;
				border-radius: 100rpx;
				font-size: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					width: 40rpx;
					height: 40rpx;
					vertical-align: middle;	
				}
			}
		}
	}
	
	.agree{
		position: fixed;
		bottom: 110rpx;
		width: 750rpx;
		display: flex;
		align-items: center;
		color: #999999;
		
		view{
			display: flex;
		}
	}
	
	
	.pay{
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		position: fixed;
		bottom: 0rpx;
		width: 750rpx;
		background-color: #FFFFFF;
		align-items: center;
		.money{
			font-size: 42rpx;
			padding: 20rpx 40rpx;
			color: #DD524D;
		}
		.btn{
			background-color: #00c84c;
			padding: 30rpx 50rpx;
			color: #FFFFFF;
		}
	}
	
</style>